<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="600px"
    @close="closeDialog"
  >
    <el-form ref="formRef" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="计量单位" prop="pkMeasdoc">
        <el-select v-model="form.pkMeasdoc" filterable placeholder="Select">
          <el-option
            v-for="meas in measList"
            :key="meas.pkMeasdoc"
            :label="meas.measName"
            :value="meas.pkMeasdoc"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="转换率" prop="rate">
        <el-input-number v-model="form.rate" :min="1" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import { editBasePickingBoxDetailApi } from '@/api/base/base_picking_box_api'
  import { getAllMeasdocApi } from '@/api/base/measdoc'
  import { localStorageConfig } from '@/config/localstorage.config'

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const $baseMessage = inject('$baseMessage')
  const measList = ref()
  const dialogVisible = ref(false),
    dialogTitle = ref('增加包装明细'),
    formRef = ref(),
    form = reactive({}),
    rules = reactive({
      pkMeasdoc: [
        { required: true, trigger: 'blur', message: '请选择计量单位' },
      ],
      rate: [{ required: true, trigger: 'blur', message: '请输入转化率' }],
    })

  const openDialog = (record) => {
    getAllMeas()
    dialogVisible.value = true
    if (record.pkPickingBoxB) {
      dialogTitle.value = '修改包装明细'
      form['pkPickingBoxB'] = record.pkPickingBoxB ? record.pkPickingBoxB : ''
      form['pkPickingBoxH'] = record.pkPickingBoxH ? record.pkPickingBoxH : ''
      form['pkMeasdoc'] = record.pkMeasdoc ? record.pkMeasdoc : ''
      form['rate'] = record.rate ? record.rate : ''
    } else {
      dialogTitle.value = '增加包装明细'
      form['pkPickingBoxB'] = ''
      form['pkPickingBoxH'] = record.pkPickingBoxH ? record.pkPickingBoxH : ''
      form['pkMeasdoc'] = ''
      form['rate'] = 1
      form['pkCorp'] = pkCorp
    }
  }
  const getAllMeas = async () => {
    const params = {
      pkCorp: pkCorp,
    }
    const { code, data } = await getAllMeasdocApi(params)
    if (code === 2000) {
      measList.value = data
    }
  }
  const save = () => {
    if (!formRef.value) return
    formRef.value.validate(async (valid) => {
      if (valid) {
        let res = await editBasePickingBoxDetailApi({
          ...form,
        })
        if (res && res.code === 2000) {
          $baseMessage('操作成功', 'success')
          _emit('success-callback')
          closeDialog()
        } else {
          $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
        }
      } else {
        return false
      }
    })
  }
  const closeDialog = () => {
    dialogVisible.value = false
  }
  defineExpose({ openDialog })
  const _emit = defineEmits(['success-callback'])
</script>
